<template>
	<view class="template-order">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left-arrow'></text>
			</view>
		</tn-nav-bar>

		<view class="order--wrap" :style="{top: vuex_custom_bar_height + 'px'}">
			<!-- 顶部标签 -->
			<scroll-view :style="{height: `${swiperHeight}px`}" scroll-y>
				<view v-for="(item,index) in nurserList" :key="index" class="order__item"
					@click="tn('/pages/manager/nurserList/nurserDetail')">
					<!-- <view
						class="order__item__head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
						<view class="order__item__head__title">订单编号：SF009098765798</view>
					</view> -->

					<view
						class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
						<view class="order__item__content__image tn-flex tn-flex-direction-row tn-flex-col-center">
							<!-- <image src="/static/zhuyi.png" mode="aspectFill"
								class="tn-margin-right"></image> -->
							<tn-avatar fontColor="#080808"
								src='/static/zhuyi.png'></tn-avatar>
							<view class="order__item__content__title tn-margin-left">
								{{item.worker_name}}
							</view>
							<view class="order__item__content__title">
								{{item.age}}/{{item.sex==0?'男':'女'}}
							</view>
						</view>

						<!-- <view
							class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
							<view class="order__item__content__info__price">
								<text class="order__item__content__info__price--unit">￥</text>
								<text class="order__item__content__info__price__value--integer">1000</text>
								<text class="order__item__content__info__price__value--decimal">.00</text>
							</view>
							<view class="order__item__content__info__count">
								<text>共1件</text>
							</view>
						</view> -->
					</view>

					<view
						class="order__item__operation tn-flex tn-flex-direction-column tn-flex-nowrap  tn-flex-row-between">
						<view class="order__item__operation__left tn-flex tn-flex-direction-row">
							<view class="order__item__operation__left--title">从属医院</view>
							<view class="">{{item.hospital}}</view>
						</view>
						<view class="order__item__operation__left tn-flex tn-flex-direction-row">
							<view class="order__item__operation__left--title">手机号</view>
							<view class="">{{item.phone}}</view>
						</view>
						<view class="order__item__operation__left tn-flex tn-flex-direction-row">
							<view class="order__item__operation__left--title">护工等级</view>
							<view class="">{{item.workerLevel}}</view>
						</view>
						<!-- <view class="order__item__operation__left tn-flex tn-flex-direction-row">
							<view class="order__item__operation__left--title">详细地址</view>
							<view class="">{{item.address}}</view>
						</view>
						<view class="order__item__operation__left tn-flex tn-flex-direction-row">
							<view class="order__item__operation__left--title">联系人</view>
							<view class="">{{item.familyname}}</view>
						</view>
						<view class="order__item__operation__left tn-flex tn-flex-direction-row">
							<view class="order__item__operation__left--title">联系电话</view>
							<view class="">{{item.telephone}}</view>
						</view> -->
						<!-- <view
							class="order__item__operation__right tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right">
							<view class="order__item__operation__right__button">
								<tn-button shadow shape="round" fontColor="tn-color-white" backgroundColor="tn-bg-blue"
									:fontSize="24" height="auto" padding="10rpx 18rpx">删除</tn-button>
							</view>
						</view> -->
					</view>
				</view>
				<view class="tn-padding-bottom"></view>
			</scroll-view>

		</view>
		<!-- 悬浮按钮-->
		<view class="tn-flex tn-footerfixed">
			<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
				<tn-button backgroundColor="#3668FC" padding="40rpx 0" width="80%" shadow fontBold
					@click="tn('/pages/manager/nurserList/nurserAddOrEdit')">
					<text class="tn-color-white"><text class="tn-icon-add"></text>新增护工</text>
				</tn-button>
			</view>
		</view>
		<tn-modal v-model="codeShow" :custom="true">
			<view class="custom-modal-content">
				<uqrcode ref="uqrcode" canvas-id="qrcode" value="https://uqrcode.cn/doc" :options="{ margin: 10 }">
				</uqrcode>
			</view>
		</tn-modal>

	</view>
</template>

<script>
	import templatePageMixin from '@/libs/mixin/template_page_mixin.js'

	export default {
		name: 'TemplateOrder',
		mixins: [templatePageMixin],
		data() {
			return {
				// 当前选中的模式
				currentModeIndex: 0,
				nurserList: [{
					age: "37岁",
					auto_payoff: 1,
					bank_code: "6230520400446367872",
					bxTime: "Fri Mar 01 2024 00:00:00 GMT+0800 (中国标准时间)",
					card_code: "410423198710151022",
					cause: null,
					createTime: "2024-03-19 15:16:41",
					headImg: "http://39.103.167.53:9198/file/virtual/176afc7e34f045a592f423802209c665.jpg",
					hospital: "浙江绿城心血管病医院",
					id: 532,
					isPerson: "1",
					item: [],
					jobStatus: 1,
					officeNum: 0,
					ownWorker: 1,
					phone: "17895755875",
					servingCount: 0,
					systemw: null,
					userNum: 0,
					userStatus: 2,
					workTime: "2个月",
					workerLevel: "初级护工",
					worker_name: "徐金苹",
					worker_sex: 2,
				}],
				list: [{
						name: '全部'
					},
					{
						name: '已接单'
					},
					{
						name: '进行中',
						count: 10
					},
					{
						name: '待确认'
					},
					{
						name: '已完成'
					}
				],
				tabsIndex: 0,
				swiperIndex: 0,
				swiperTop: 0,
				swiperHeight: 0,
				codeShow: false
			}
		},
		// onReady() {
		// 	this.$nextTick(() => {
		// 		this.updateSwiperInfo()
		// 	})
		// },
		created() {
			console.log('11111')
			this.$nextTick(() => {
				this.updateSwiperInfo()
			})
		},

		methods: {

			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},

			// 计算可滑动区域的高度信息
			updateSwiperInfo() {
				// 获取可滑动菜单的信息
				const systemInfo = uni.getSystemInfoSync()
				this.swiperHeight = systemInfo.safeArea.height + systemInfo.statusBarHeight - this
					.vuex_custom_bar_height
			},
			// 标签栏值发生改变
			tabsChange(index) {
				this.swiperIndex = index
			},
			// swiper-item位置发生改变
			swiperTransition(event) {
				this.$refs.tabs.setDx(event.detail.dx)
			},
			// swiper动画结束
			swiperAnimationFinish(event) {
				const current = event.detail.current
				this.$refs.tabs.setFinishCurrent(current)
				this.swiperIndex = current
				this.tabsIndex = current
			},
			openScan() {
				uni.authorize({
					scope: 'scope.camera',
					success() {
						// 用户同意授权
						scanQRCode();
					},
					fail() {
						// 用户拒绝授权
						uni.showToast({
							title: '您拒绝了授权',
							icon: 'none'
						});
					}
				});
			},
			scanQRCode() {
				uni.scanCode({
					success(res) {
						if (res.result) {
							// 扫描成功，处理二维码内容
							console.log('扫描结果：', res.result);
							// 这里可以进行后续操作，如跳转页面、显示信息等
						} else {
							// 扫描失败
							uni.showToast({
								title: '扫描失败',
								icon: 'none'
							});
						}
					},
					fail() {
						// 调用相机失败
						uni.showToast({
							title: '调用相机失败',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.template-order {
		background-color: #FFFFFF;
	}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 60%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

	}

	.login {
		position: relative;
		height: 100%;
		z-index: 1;

		/* 内容 start */
		&__wrapper {
			width: 100%;
		}

		/* 切换 start */
		&__mode {
			position: relative;
			margin: 0 auto;
			width: 326rpx;
			height: 60rpx;
			margin-top: 16rpx;
			border: 1rpx solid #E6E6E6;
			border-radius: 39rpx;

			&__item {
				height: 77rpx;
				width: 100%;
				line-height: 77rpx;
				text-align: center;
				font-size: 31rpx;
				color: #AAAAAA;
				z-index: 2;
				transition: all 0.4s;

				&--active {
					font-weight: bold;
					color: #000000;
				}
			}
		}

		/* 切换 end */

	}


	.order {
		&--wrap {
			position: fixed;
			left: 0;
			right: 0;
			width: 100%;
			background-color: inherit;
		}

		/* 导航栏 start */
		&__tabs {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			background-color: inherit;
		}

		/* 导航栏 end */

		/* swiper start */
		&__swiper {
			position: absolute;
			left: 0;
			right: 0;
			width: 100%;
			background-color: inherit;
			// padding: 0 16rpx;
		}

		/* swiper end */

		/* 订单内容 start */
		&__item {
			margin: 20rpx;
			padding: 36rpx 26rpx;
			background-color: #FFFFFF;
			border-radius: 15rpx;
			box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);

			&:first-child {
				margin-top: 40rpx;
			}

			&:last-child {
				margin-bottom: 0;
			}

			/* 头部 start */
			&__head {

				&__title {
					font-weight: bold;
					line-height: normal;

					&--right-icon {
						font-size: 24rpx;
						margin-left: 8rpx;
					}
				}

				&__status {
					font-size: 22rpx;
					color: #AAAAAA;
				}
			}

			/* 头部 end */

			/* 内容 start */
			&__content {

				// margin-top: 20rpx;

				&__image {
					margin-right: 20rpx;

					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 10rpx;
					}
				}

				&__title {
					padding-right: 40rpx;
					display: -webkit-box;
					overflow: hidden;
					white-space: normal !important;
					text-overflow: ellipsis;
					word-wrap: break-word;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				&__info {

					&__price {
						&--unit {
							font-size: 20rpx;
						}

						&__value--integer,
						&__value--decimal {
							font-weight: bold;
						}

						&__value--decimal {
							font-size: 20rpx;
						}
					}

					&__count {
						color: #AAAAAA;
						font-size: 24rpx;
					}
				}
			}

			/* 内容 end */

			/* 操作按钮 start */
			&__operation {
				margin-top: 30rpx;

				&__left {
					margin-bottom: 15rpx;
					line-height: 1;

					&--title {
						color: #8b8b8b;
						width: 160rpx;


					}
				}

				&__right {
					&__button {
						margin-left: 10rpx;
					}
				}
			}

			/* 操作按钮 end */
		}

		/* 订单内容 end */
	}

	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}

	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: calc(30rpx + env(safe-area-inset-bottom));
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

	}

	/* 底部悬浮按钮 end*/

	/* 二维码弹窗 */
	.custom-modal-content {
		display: flex;
		justify-content: center;
	}
</style>